<template>
  <div class="app-container">
    <div class="ceshi">
      <div class="ceshi-list" v-for="(item,index) in list" :key="index">
        <div class="ceshi-list-title">{{index+1}}.{{item.tname}}</div>
        <div class="ceshi-list-btm">
          <el-radio v-model="item.daans" class="btm-1" :disabled="haveResult" :label="item.tan1">{{item.tan1}}</el-radio>
          <el-radio v-model="item.daans" class="btm-1" :disabled="haveResult" :label="item.tan2">{{item.tan2}}</el-radio>
          <el-radio v-model="item.daans" class="btm-1" :disabled="haveResult" :label="item.tan3">{{item.tan3}}</el-radio>
          <el-radio v-model="item.daans" class="btm-1" :disabled="haveResult" :label="item.tan4">{{item.tan4}}</el-radio>
          <p v-if="haveResult">正确答案: {{item.daan}}</p>
        </div>
      </div>
      <el-button size="small" type="primary" @click="submitProblem" v-if="!haveResult">确认提交</el-button>
      <div class="code" v-if="haveResult">您的测试分数是: {{code}}分</div>
    </div>
    
  </div>
</template>

<script>
let classDetail = null,zhangjieId = null,tempnum = -1,surenum = null;  //中间值id,最终确认值id
import { getPeoblemTest,getPeoblemTestResult,addPeoblemTestResult } from '@/api/people'
export default {
  data(){
    return {
      radio: '-1',
      list: null,
      haveResult: false,
      result: [],
      code: 0
    }
  },
  mounted(){
    // 获取课程id
    classDetail = JSON.parse(sessionStorage.getItem('videoDetail'))
    // 获取章节id
    zhangjieId = JSON.parse(this.$route.params.options)
    // 获取题目详情
    this.list = JSON.parse(this.$route.params.options).eduChapterTest
    console.log(this.list)
    console.log('classDetail',classDetail,'zhangjieId',zhangjieId)
    // this.getDetail(zhangjieId.id)
    this.getRusult(zhangjieId.id)
  },
  methods:{
    /**
     * 获取测试题详情
     */
    getDetail(id) {
      getPeoblemTest({parentId:id}).then(res => {
        console.log('测试题',res)
      })
    },
    /**
     * 获取测试题结果
     */
    getRusult(zhangjieid) {
      const user = this.$store.state.user.userInfo[0]
      getPeoblemTestResult({
        zhangjieid: zhangjieid,
        userid: user.userId
      }).then(res => {
        console.log('测试题结果',res)
        if(res.data.eduTeacher && res.data.eduTeacher.length){
          // 双重for循环匹配对应选项值
          console.log(111111)
          for(let i = 0;i < this.list.length;i++){
            for(let j = 0;j < res.data.eduTeacher.length;j++){
              console.log()
              if(this.list[i].tid === res.data.eduTeacher[j].xuantiid){
                this.list[i].daans = res.data.eduTeacher[j].xuanxiang
                break
              }
            }
          }
          console.log('测试重构结果',this.list)
          // 得到对的题目
          const dui = res.data.eduTeacher.filter(item => item.duicuo === 'true').length
          // 获取分数结果
          this.code = (dui/res.data.eduTeacher.length * 100).toFixed(2)
          this.haveResult = true
        }else{
          this.haveResult = false
        }
      })
    },

    // getPeoblemTestResult()
    /**
     * 提交问题
     */
    submitProblem(){
      const user = this.$store.state.user.userInfo[0]
      const arr = []
      this.list.map(item => {
        let temp = item
        let flag = null
        // 获取不同随机数拼接id
        this.filterRandom(tempnum)
        console.log('surenum',surenum)
        // 获取时间戳拼接id
        const times = +new Date()
        if(temp.daans === temp.daan){
          flag = true
        }else{
          flag = false
        }
        arr.push({
          "duicuo": `${flag}`,
          "csid": `${times}${surenum}`,
          "kechengid": classDetail.id,
          "userid": user.userId,
          "xuantiid": temp.tid,
          "xuanxiang": temp.daans,
          "zhangjieid": zhangjieId.id
        })
      })
      console.log('传参',arr)
      const flag = arr.every(item => item.xuanxiang)
      console.log(flag)
      if(flag){
        const param = JSON.stringify(arr)
        console.log(param)
        addPeoblemTestResult(param).then(res => {
          console.log(res)
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        }).then(res => {
          console.log(res)
          this.getRusult()
        })
      }else{
        this.$message({
          message: '检查有未完成题目!',
          type: 'warning'
        })
      }
    },
    // 匹配不重复随机数随机数
    filterRandom(num){
      const num1 = Math.floor(Math.random()*10);
      if(num === num1){
        this.filterRandom(num)
      }else{
        surenum = tempnum = num1
        return
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .ceshi{
    /deep/.el-button--primary {
      color: #fff;
      background-color: #18a05e !important;
      border-color: #18a05e !important;
      border: none
    }
    /deep/.el-radio__input.is-checked .el-radio__inner {
      border-color: #37b377;
      background: #37b377;
    }
    /deep/.el-radio__input.is-checked+.el-radio__label {
      color: #37b377;
    }
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.1);
    &-list{
      padding-bottom: 10px;
      &-title{
        font-size: 16px;
        color: #18A05E;
        font-weight: 600;
        padding: 5px 0;
      }
      &-btm{
        padding-left: 15px;
        display: flex;
        flex-direction: column;
        >p{
          font-size: 14px;
          color: #999;
        }
        .btm-1{
          padding: 5px 0;
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
  .code{
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
</style>